import React, { useEffect, useState } from 'react'
import { SearchBar, Swiper } from 'antd-mobile'
import { useDebounce } from '../../hooks/useDebounce'
import { debounce } from 'lodash'
import { request } from '../../utils/request'
const Home1 = () => {
  const onChange = debounce((value) => {
    console.log("请求数据")
  }, 800)
  const [list, setList] = useState([])

  const getBanner = async () => {
    // /index/banner
    const resp = await request.get('/index/banner');
    console.log(resp.data.data)
    setList(resp.data.data)
  }

  useEffect(() => {
    getBanner()
  }, [])
  return (
    <div>
        <SearchBar onChange={(value) => onChange(value)}></SearchBar>
        <Swiper>
          {
            list.map((v, i) => {
              return (
                <Swiper.Item key={i}>
                  <img src={v.img} alt="" style={{ width: '100%', height: '200px' }}/>
                </Swiper.Item>
              )
            })
          }
        </Swiper>
    </div>
  )
}

export default Home1